<template>
  <div class="settings" ref="settingsRef">
    <!-- 标题区域 -->
    <van-sticky ref="stickyRef">
      <header-component :title="data.title" :showPre="false" :titleSlide="titleSlide"></header-component>
    </van-sticky>
    <!-- 主体内容区 -->
    <section>
      <!-- 我的账户 -->
      <router-link to="/account"><div class="userInfo">
        <van-image
            round
            width="5rem"
            height="5rem"
            :src="useUserStore().user.avatar"
        />
        <div class="userName">
          <i class="fa-solid fa-user"></i>
          <span v-text="useUserStore().user.nickName"></span>
        </div>
        <van-icon name="arrow" />
      </div></router-link>
      <breadcrumbNavigation title="拓展中心" :showRightIcon="false"></breadcrumbNavigation>
      <tagList @click="isShowOverlay = true" class="tag-list" :title="data.ExpansionCenterData[0].title" :content="data.ExpansionCenterData"></tagList>
      <breadcrumbNavigation title="数据管理" :showRightIcon="false"></breadcrumbNavigation>
      <tagList class="tag-list" :title="data.DataManagementData[0].title" :content="data.DataManagementData"></tagList>
      <breadcrumbNavigation title="通用偏好" :showRightIcon="false"></breadcrumbNavigation>
      <tagList class="tag-list" :title="data.GeneralPreferencesData[0].title" :content="data.GeneralPreferencesData"></tagList>
      <breadcrumbNavigation title="帮助和支持" :showRightIcon="false"></breadcrumbNavigation>
      <tagList class="tag-list" :title="data.HelpAndSupportData[0].title" :content="data.HelpAndSupportData"/>
    <!-- 弹窗 -->
    <operate-box :is-show="isShowOverlay" @handle-close="handleClose">
        <div>正在玩命开发中，敬请期待</div>
    </operate-box>
    </section>

  </div>
</template>

<script>
export default { name: "settings" };
</script>

<script setup>
import headerComponent from "@/components/header/index.vue";
import operateBox from "@/components/operateBox/index.vue"
import tagList from '@/components/list/tagList.vue';
import BreadcrumbNavigation from "@/components/breadcrumbNavigation/index.vue";
import { ref, watch, reactive } from "vue";
import useScroll from "@/hooks/useScroll";
import {Dialog} from "vant"
import {useScrollWatch,useScrollWatch2} from "@/hooks/userScrollWatch.js";
import {onMounted} from "@vue/runtime-core";
import {getUserProfile} from "@/api/system/user.js";
import useUserStore from "@/stores/modules/user.js";
// data
const data = new reactive({
  // title
  title: '更多',
  isShowDialog: true,
  message: "正在玩命开发中，敬请期待",
  // contentList
  ExpansionCenterData: [{ title: '智能工具', url: '', icon: 'iconfont icon-pintu', iconColor: '#f64f59', name: '拓展中心', totalNum:'', operate: '', info: ''}],
  DataManagementData: [
   { title: '数据管理', url: '/statistics', icon: 'iconfont icon-fenxi', iconColor: '#c471f5', name: '用量分析', totalNum:'',operate: '', info: ''},
   { title: '数据管理', url: '/share', icon: 'iconfont icon-fenxiang1', iconColor: '#ee609c', name: '分享管理', totalNum:'',operate: '', info: ''},
   { title: '数据管理', url: '/history', icon: 'iconfont icon-lishixiao', iconColor: '#611dd0', name: '历史同步', totalNum:'',operate: '', info: ''},
   { title: '数据管理', url: '/parse', icon: 'iconfont icon-shaixuan', iconColor: '#fa71cd', name: '解析名单', totalNum:'',operate: '', info: ''}],
  GeneralPreferencesData: [
    { title: '通用偏好', url: '/preference', icon: 'iconfont icon-pifugexinghua', iconColor: '#00C9FF', name: '个性偏好', totalNum:'',operate: '', info: ''},
    { title: '通用偏好', url: '/theme', icon: 'iconfont icon-waiguan1', iconColor: '#9733EE', name: '外观主题', totalNum:'',operate: '', info: ''},
    { title: '通用偏好', url: '/lock', icon: 'fa-solid fa-shield', iconColor: '#24FE41', name: '密码锁', totalNum:'',operate: '',info: ''},
    { title: '通用偏好', url: '/advanceSetting', icon: 'fa-solid fa-gear', iconColor: '#DA22FF', name: '高级设置', totalNum:'',operate: '', info: ''},
  ],
  HelpAndSupportData: [
    { title: '帮助和支持', url: '/about', icon: 'iconfont icon-guanyu', iconColor: '#FDC830', name: '关于', totalNum:'',operate: '', info: ''},
    { title: '帮助和支持', url: '', icon: 'iconfont icon-gengxin', iconColor: '#24FE41', name: '检查更新', totalNum:'',operate: '', info: ''},
    { title: '帮助和支持', url: '/useGuide', icon: 'iconfont icon-bangzhu', iconColor: '#9733EE', name: '使用指南', totalNum:'',operate: '', info: ''}
  ],
  roleGroup: {},
  postGroup: {}
})

// 是否显示
const isShowOverlay = ref(false);
// 关闭弹窗
const handleClose = (value) => {
    console.log(value)
    isShowOverlay.value = false
}

/** 获取用户信息 */
function getUser() {
  getUserProfile().then(response => {
    useUserStore().user = response.data;
    data.roleGroup = response.roleGroup;
    data.postGroup = response.postGroup;
  });
}

getUser()

/** 标题动画相关的操作 */
const settingsRef = ref();
const stickyRef = ref();
let titleSlide = useScrollWatch(settingsRef)
useScrollWatch2(titleSlide,stickyRef)
</script>

<style lang="less" scoped>
.settings {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 160px;
  .userInfo{
    position: relative;
    top: 40px;
    padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
    background-color: var(--van-cell-background);
    border-radius: var(--card-border-radius);
    box-shadow: 0 0 2px #fff, 0 0 4px #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .userName{
      flex: 1;
      position: relative;
      left: 6%;
      span{
        position: relative;
        left: 8px;
      }
    }
  }
  .box{
    position: relative;
    top: 50px;
  }
  section{
    padding: 0 12px;
    .breadCrumbNavigation{
      position: relative;
      top: 60px;
    }
  }
}
.settings::-webkit-scrollbar {
  display: none;/*隐藏滚动条*/
}
.tag-list{
  position: relative;
  top: 60px;
}
</style>
